<template>
  <section class="array-input">
    <van-row>
      <van-col
        v-for="(item, index) in params.columns"
        :key="index"
        style="text-align: center; line-height: 2"
        :span="24 / params.columns.length"
      >
        {{ item.label }}
      </van-col>
    </van-row>
    <van-row v-for="(item, index) in params.options" :key="index">
      <van-col
        v-show="item.text"
        class="text"
        :span="24 / params.columns.length"
      >
        {{ item.text }}
      </van-col>
      <van-col
        v-show="item.value"
        class="text"
        style="text-align: center"
        :span="24 / params.columns.length"
      >
        {{ item.value }}
      </van-col>
      <van-col
        class="text"
        style="text-align: center"
        :span="24 / params.columns.length"
      >
        <van-field
          v-model="value[index]"
          placeholder="请输入"
          input-align="center"
          type="number"
          @blur="validate(index, Number(item.value))"
        />
      </van-col>
    </van-row>
  </section>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps(['params', 'modelValue', 'formParams'])
const value = ref(props.modelValue)
const emits = defineEmits(['update:modelValue', 'validate', 'getText'])
const validate = (index, number) => {
  if (value.value[index] > number && number) {
    value.value[index] = number
    emits('update:modelValue', value.value)
  }
}
watch(
  () => props.modelValue,
  newVal => {
    value.value = newVal
  },
)
</script>

<style scoped>
.text {
  text-align: center;
  line-height: 44px;
}
.array-input {
  background: #fff;
  padding: 20px 0;
}
</style>
